<template>
  <div>
    <hr />
    <div>
      {{ obj }}
    </div>
    <div>
      <input type="text" v-model="obj.name" />
      {{ obj.name }}
    </div>
    <div>
      {{ obj.age }}
    </div>
    <button @click="setAge1">设置obj.age</button>
    <button @click="setAge2">设置obj.age</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: {
        name: "lhr",
      },
    }
  },
  methods: {
    setAge1() {
      this.obj.age = 18
      console.log(this.obj) // this.obj更新，但是页面obj还是老的
    },
    setAge2() {
      this.$set(this.obj, "age", 18) // this.obj 和页面的obj一起更新
      console.log(this.obj)
    },
  },
}
</script>
